<script lang="ts" setup name="LoginForm">
	import { ref, watch } from 'vue'
	// import { ref, watch, onUnmounted } from 'vue'
	import useStore from '@/store'
	import Message from '@/components/message'
	import { useRoute, useRouter } from 'vue-router'
	import { useField, useForm } from 'vee-validate'
	// import { useIntervalFn } from '@vueuse/core'
	import { useCountDown } from '@/utils/hooks'
	import { accountRule, passwordRule, mobileRule, codeRule, isAgreeRule } from '@/utils/validate'

	const router = useRouter()
	const route = useRoute()
	const type = ref<'account' | 'mobile'>('account')

	// vee-validate基本使用
	// 1.通过useForm提供校验规则
	const { validate, resetForm } = useForm({
		// #region
		// validationSchema: {
		// 	account(value: string) {
		// 		// value是将来使用该规则的表单元素的值
		// 		// 1. 必填
		// 		// 2. 6-20个字符，需要以字母开头
		// 		// 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。
		// 		if (!value) return '请输入用户名'
		// 		if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
		// 		return true
		// 	},
		// 	password(value: string) {
		// 		if (!value) return '请输入密码'
		// 		if (!/^\w{6,12}$/.test(value)) return '密码必须是6-24位字符'
		// 		return true
		// 	},
		// 	isAgree(value: boolean) {
		// 		if (!value) return '请同意隐私条款'
		// 		return true
		// 	},
		// 	mobile: (value: string) => {
		// 		if (!value) return '请输入手机号'
		// 		if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
		// 		return true
		// 	},
		// 	code: (value: string) => {
		// 		if (!value) return '请输入验证码'
		// 		if (!/^\d{6}$/.test(value)) return '验证码格式错误'
		// 		return true
		// 	},
		// },
		// #unregion
		validationSchema: {
			account: accountRule,
			password: passwordRule,
			isAgree: isAgreeRule,
			mobile: mobileRule,
			code: codeRule,
		},
		// 表单初始值
		initialValues: {
			mobile: '13666666666',
			code: '123456',
			account: 'xiaotuxian001',
			password: '123456',
			isAgree: true,
		},
	})
	// 2.通过useField提供value值和错误信息
	const { value: account, errorMessage: accountError } = useField<string>('account')
	const { value: password, errorMessage: passwordError } = useField<string>('password')
	const { value: isAgree, errorMessage: isAgreeError } = useField<boolean>('isAgree')
	const {
		value: mobile,
		errorMessage: mobileError,
		validate: validateMobile,
	} = useField<string>('mobile')
	const { value: code, errorMessage: codeError } = useField<string>('code')

	const { user } = useStore()
	const login = async () => {
		const res = await validate()
		if (type.value === 'account') {
			// 账号登录
			if (res.errors.account || res.errors.password || res.errors.isAgree) return
			await user.login(account.value, password.value)
		} else {
			// 验证码登录
			if (res.errors.mobile || res.errors.code || res.errors.isAgree) return
			await user.mobileLogin(mobile.value, code.value)
		}
		Message.success('登录成功')
		// const redirectUrl = (route.query.redirectUrl as string) || '/'
		const redirectUrl = localStorage.getItem('redirectUrl') || '/'
		localStorage.removeItem('redirectUrl')
		router.push(redirectUrl)
	}

	// 监听账户或短信登录 重置表单
	watch(type, () => {
		resetForm()
	})

	const mobileRef = ref<HTMLInputElement | null>(null)
	// ------------------
	// const time = ref(0)
	// useIntervalFn的使用
	// const { pause, resume } = useIntervalFn(
	// 	() => {
	// 		time.value--
	// 		if (time.value === 0) {
	// 			pause()
	// 		}
	// 	},
	// 	1000,
	// 	// 是否立即启动
	// 	{
	// 		immediate: false,
	// 	}
	// )
	// --------------------
	const { time, start } = useCountDown(5)
	const send = async () => {
		if (time.value > 0) return
		start()
		const res = await validateMobile()
		if (!res.valid) {
			mobileRef.value?.focus()
			return
		}
		await user.sendMobileMsg(mobile.value)
		Message.success('验证码发送成功')
		// 开启倒计时
		// time.value = 5
		// let timer = window.setInterval(() => {
		// 	time.value--
		// 	if (time.value === 0) {
		// 		clearTimeout(timer)
		// 	}
		// }, 1000)
		// resume()
	}
	// 离开页面时，销毁定时器, 已封装进useCountDown函数
	// onUnmounted(() => {
	// 	pause()
	// })
</script>
<template>
	<div class="account-box">
		<div class="toggle">
			<a href="javascript:;" @click="type = 'account'" v-if="type === 'mobile'"
				><i class="iconfont icon-user"></i> 使用账号登录
			</a>
			<a href="javascript:;" @click="type = 'mobile'" v-else
				><i class="iconfont icon-msg"></i> 使用短信登录
			</a>
		</div>
		<div class="form">
			<template v-if="type === 'account'">
				<div class="form-item">
					<div class="input">
						<i class="iconfont icon-user"></i>
						<input type="text" v-model="account" placeholder="请输入用户名或手机号" />
					</div>
					<div class="error" v-if="accountError">
						<i class="iconfont icon-warning" />{{ accountError }}
					</div>
				</div>
				<div class="form-item">
					<div class="input">
						<i class="iconfont icon-lock"></i>
						<input type="password" v-model="password" placeholder="请输入密码" />
					</div>
					<div class="error" v-if="passwordError">
						<i class="iconfont icon-warning" />{{ passwordError }}
					</div>
				</div>
			</template>
			<template v-else>
				<div class="form-item">
					<div class="input">
						<i class="iconfont icon-user"></i>
						<input ref="mobileRef" type="text" v-model="mobile" placeholder="请输入手机号" />
					</div>
					<div class="error" v-if="mobileError">
						<i class="iconfont icon-warning" />{{ mobileError }}
					</div>
				</div>
				<div class="form-item">
					<div class="input">
						<i class="iconfont icon-code"></i>
						<input type="text" v-model="code" placeholder="请输入验证码" />
						<span class="code" @click="send">{{
							time === 0 ? '发送验证码' : `${time}s后发送`
						}}</span>
					</div>
					<div class="error" v-if="codeError">
						<i class="iconfont icon-warning" />{{ codeError }}
					</div>
				</div>
			</template>
			<div class="form-item">
				<div class="agree">
					<XtxCheckBox v-model="isAgree"></XtxCheckBox>
					<span>我已同意</span>
					<a href="javascript:;">《隐私条款》</a>
					<span>和</span>
					<a href="javascript:;">《服务条款》</a>
				</div>
				<div class="error" v-if="isAgreeError">
					<i class="iconfont icon-warning" />{{ isAgreeError }}
				</div>
			</div>
			<a href="javascript:;" class="btn" @click="login">登录</a>
		</div>
		<div class="action">
			<a
				href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback"
				><img
					src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
					alt="QQ登录"
					border="0"
			/></a>
			<div class="url">
				<a href="javascript:;">忘记密码</a>
				<a href="javascript:;">免费注册</a>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	// 账号容器
	.account-box {
		.toggle {
			padding: 15px 40px;
			text-align: right;
			a {
				color: @xtxColor;
				i {
					font-size: 14px;
				}
			}
		}
		.form {
			padding: 0 40px;
			&-item {
				margin-bottom: 28px;
				.input {
					position: relative;
					height: 36px;
					> i {
						width: 34px;
						height: 34px;
						background: #cfcdcd;
						color: #fff;
						position: absolute;
						left: 1px;
						top: 1px;
						text-align: center;
						line-height: 34px;
						font-size: 18px;
					}
					input {
						padding-left: 44px;
						border: 1px solid #cfcdcd;
						height: 36px;
						line-height: 36px;
						width: 100%;
						&.error {
							border-color: @priceColor;
						}
						&.active,
						&:focus {
							border-color: @xtxColor;
						}
					}
					.code {
						position: absolute;
						right: 1px;
						top: 1px;
						text-align: center;
						line-height: 34px;
						font-size: 14px;
						background: #f5f5f5;
						color: #666;
						width: 90px;
						height: 34px;
						cursor: pointer;
					}
				}
				> .error {
					position: absolute;
					font-size: 12px;
					line-height: 28px;
					color: @priceColor;
					i {
						font-size: 14px;
						margin-right: 2px;
					}
				}
			}
			.agree {
				a {
					color: #069;
				}
			}
			.btn {
				display: block;
				width: 100%;
				height: 40px;
				color: #fff;
				text-align: center;
				line-height: 40px;
				background: @xtxColor;
				&.disabled {
					background: #cfcdcd;
				}
			}
		}
		.action {
			padding: 20px 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			img {
				cursor: pointer;
			}
			.url {
				a {
					color: #999;
					margin-left: 10px;
				}
			}
		}
	}
</style>
